<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 子传父 -->
			<cpn @btn-in="cpnCount" @btn-de="cpnCount"></cpn>
			<h3>点赞数量:{{total}}</h3> 
		</div>
		<template id="cpn">
			<!-- 注意一定要用div,包裹起来不然仅显示第一个标签 -->
			<div>
				<button @click="decrement">-</button>
				<button @click="increment">+</button>
			</div>
		</template>
	</body>
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		const cpn = {
			template:"#cpn",
			data(){
				return {
					count : 0	
				}
			},
			methods:{
				increment(){
					this.count++;
					this.$emit('btn-in',this.count);
				},
				decrement(){
					this.count--;
					this.$emit('btn-de',this.count);
				}
			}
		}
		const app = new Vue({
			el : "#app",
			data : {
				total : 0
			},
			methods : {
				cpnCount(count){
					this.total = count;
				}
			},
			components:{
				cpn
			}
		})
	</script>
</html>
